<template>
	<view class="Content">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :title="Pinia.title"></navBar>
		<!-- #endif -->
		<block v-for="(item,index) in pageData" :key="index">
			<view class="UploadBox" @click="UploadImg(index)" v-if="item.vpType == 7">
				<view class="upload flexac">
					<image :src="$imgUrls(item.value)" mode="aspectFill" class="wh" v-if="item.value"></image>
					<view class="iconfont icon-tianjia color_f2" v-else></view>
				</view>
				<view class="uploadBtn">上传头像</view>
			</view>
		</block>
		<view class="flex-1 d-flex a-end p-bot100">
			<view class="Btns" @click="Continue">提交上传</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import Http from '@/common/request.js';
	import common from "@/common/common.js";
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const { imgUrls: $imgUrls, Toast, toUrl } = inject('Utils');
	const headImg = ref('headImg');
	const pageData = ref([]);

	onShow(() => {
		user_base_info()
	})

	const user_base_info = () => {
		Http.get({
			url: '/WeddingApi/user_base_info',
			data: {
				times: 2
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			const result = res.data.list || [];
			pageData.value = result;
		})
	}


	const Continue = () => {
		for (var item of pageData.value) {
			if (item.bixu == 1 && !item.value) return Toast(`${item.vpName}不能为空！`)
		}
		Http.post({
			url: '/WeddingApi/edit_base_info',
			data: {
				property: JSON.stringify(pageData.value)
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			toUrl(`depthData?procedure=1`);
		})
	}

	const UploadImg = (index) => {
		uni.chooseImage({
			count: 1,
			success(res) {
				const tempFilePaths = res.tempFilePaths[0];
				// #ifdef MP-WEIXIN
				wx.cropImage({
					src: tempFilePaths,
					cropScale: '1:1',
					success(res2) {
						uploadFile(res2.tempFilePath, index);
					},
				})
				// #endif
				// #ifdef H5
				uploadFile(tempFilePaths, index);
				// #endif
			},
		})
	}

	const uploadFile = (tempFilePath, index) => {
		common.uploadFile(tempFilePath).then(res => {
			pageData.value[index].value = res.url.substring(22, res.url.length);
		})
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.Content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.UploadBox {
		width: 420rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
	}

	.upload {
		width: 100%;
		height: 400rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.uploadBtn {
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid $themeColor;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $themeColor;
		margin: 40rpx auto 0 auto;
	}

	.icon-tianjia {
		font-size: 150rpx;
	}

	.Btns {
		width: 560rpx;
		height: 80rpx;
		background-color: $themeColor;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>